<template>
  <!--操作盒子-->
  <div class="box">

    <!--搜索块-->
    <div class="search">
      <el-input placeholder="请输入用户名或邮箱..."/>
      <el-button icon="search" type="success">搜索</el-button>
      <el-button icon="RefreshRight" type="warning">重置</el-button>
    </div>

    <!--操作-->
    <div class="operateBox">
      <el-button @click="insertDialog=true" icon="Plus" type="primary">新增</el-button>
      <el-button @click="updateDialog=true" icon="EditPen" type="success">修改</el-button>
      <el-button @click="deleteDialog=true" icon="Delete" type="danger">删除</el-button>
      <el-button @click="outDialog=true" icon="Download" type="warning">导出</el-button>
    </div>
  </div>

  <!--表格-->
  <el-table
      :data="tableData"
      border
      style="width: 100%"
  >
    <el-table-column type="selection"/>
    <el-table-column
        prop="id"
        label="ID"
        align="center"
    />
    <el-table-column
        prop="username"
        label="用户名"
        align="center"
    />
    <el-table-column
        prop="email"
        label="邮箱"
        align="center"
    />
    <el-table-column
        prop="created_at"
        label="创建时间"
        align="center"
    />
    <el-table-column
        prop="updated_at"
        label="更新时间"
        align="center"
    />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button
            size="small"
            type="primary"
            @click="edit(scope.$index, scope.row)">编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="del(scope.$index, scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--页码-->
<!--  <Pagination/>-->

  <!--新增弹出框-->
  <el-dialog
      v-model="insertDialog"
      title="新增用户"
  >
    新增用户
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="insertDialog = false">返回</el-button>
        <el-button type="primary" @click="insertDialog = false">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <!--修改弹出框-->
  <el-dialog
      v-model="updateDialog"
      title="修改用户"
  >
    修改用户
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateDialog = false">返回</el-button>
        <el-button type="primary" @click="updateDialog = false">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <!--删除弹出框-->
  <el-dialog
      v-model="deleteDialog"
      title="删除用户"
  >
    删除用户
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteDialog = false">返回</el-button>
        <el-button type="primary" @click="deleteDialog = false">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <!--导出弹出框-->
  <el-dialog
      v-model="outDialog"
      title="导出数据"
  >
    导出数据
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="outDialog = false">返回</el-button>
        <el-button type="primary" @click="outDialog = false">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import Pagination from '../../components/pagination/Index.vue'

const tableData = reactive<any[]>([])
const insertDialog = ref<boolean>(false)
const deleteDialog = ref<boolean>(false)
const updateDialog = ref<boolean>(false)
const outDialog = ref<boolean>(false)

// 编辑事件
const edit = (index: number, rowData: any) => {

}
// 删除事件
const del = (index: number, rowData: any) => {

}
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 90px;

  .search {
    margin-bottom: 10px;

    .el-input {
      width: 200px;
      height: 30px;
      margin-right: 10px;
    }
  }

  .operateBox {

  }
}

.el-button {
  width: 70px;
  height: 30px;
}
</style>